<template>
  <el-aside width="200px" style="height: 100%;position: absolute;z-index: 100">
    <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
      <template v-for="item in items">
        <template v-if="item.child!==undefined && item.child.length>0">
          <el-submenu :index="item.menupath">
            <template slot="title"><i :class="item.icon"></i>{{ item.menuname }}</template>
            <el-menu-item v-for="(subItem,i) in item.child" :key="i" :index="subItem.menupath">{{ subItem.menuname }}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.menupath">
            <i :class="item.icon"></i>{{ item.menuname }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </el-aside>
</template>

<script>
  import common from '../../common/constant'
  export default {
    data() {
      return {
        items: [
          {
            icon: 'el-icon-star-on',
            index: 'product',
            title: '产品管理'
          },
          {
            icon: 'el-icon-loading',
            index: 'new',
            title: '文章管理'
          },
          {
            icon: 'el-icon-setting',
            index: 'user',
            title: '用户管理'
          },
          {
            icon: 'el-icon-setting',
            index: 'about',
            title: '关于我们'
          },
          {
            icon: 'el-icon-picture',
            index: 'attachment',
            title: '附件管理'
          },
          {
            icon: 'el-icon-date',
            index: '2',
            title: '系统管理',
            subs: [
              {
                icon: 'el-icon-news',
                index: 'dict',
                title: '字典管理'
              },
              {
                icon: 'el-icon-tickets',
                index: 'menu',
                title: '菜单管理'
              }
            ]
          }
          /*,
           {
           icon: 'el-icon-setting',
           index: 'readme',
           title: '自述'
           },
           {
           icon: 'el-icon-menu',
           index: '2',
           title: '表格',
           subs: [
           {
           index: 'basetable',
           title: '基础表格'
           },
           {
           index: 'vuetable',
           title: 'Vue表格组件'
           }
           ]
           },
           {
           icon: 'el-icon-date',
           index: '3',
           title: '表单',
           subs: [
           {
           index: 'baseform',
           title: '基本表单'
           },
           {
           index: 'vueeditor',
           title: '编辑器'
           },
           {
           index: 'markdown',
           title: 'markdown'
           },
           {
           index: 'upload',
           title: '文件上传'
           }
           ]
           },
           {
           icon: 'el-icon-star-on',
           index: 'basecharts',
           title: '图表'
           },
           {
           icon: 'el-icon-upload2',
           index: 'drag',
           title: '拖拽'
           }*/
        ]
      }
    },
    computed: {
      onRoutes(){
        return this.$route.path.replace('/', '');
      }
    },
    created: function () {
      this.initMenue()
    },
    methods: {
      initMenue(){
        let self = this;
        self.$http.get('/api/menu')
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              let data = responseData.dataList
              if (data !== undefined && data.length > 0) {
                self.items = data[0].child
              }
            } else {
              self.message_error('查询菜单错误！^_^;')
            }
          })
          .catch(function (response) {
            self.message_error('查询菜单异常！^_^;')
          })
      },
      message_error(message) {
        if (message === null) {
          this.$notify.error({
            title: '错误',
            message: '操作失败'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: message
          });
        }
      },
      message_ok(message) {
        if (message === null) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '成功',
            message: message,
            type: 'success'
          });
        }
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo {
    height: 100%;
  }

  element.style {
    background-color: white;
  }
</style>
